<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        body {
            /* Old browsers */

            width: 100vw;
            /* FF3.6+ */

            height: 100vh;
            /* Chrome,Safari4+ */

            background: #455772;
            /* Chrome10+,Safari5.1+ */

            background: -moz-linear-gradient(-45deg, #455772 0%, #6b8395 18%, #a0d0cc 35%, #a0d0cc 45%, #a0d0cc 60%, #56737c 81%, #293e56 100%);
            /* Opera 11.10+ */

            background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #455772), color-stop(18%, #6b8395), color-stop(35%, #a0d0cc), color-stop(45%, #a0d0cc), color-stop(60%, #a0d0cc), color-stop(81%, #56737c), color-stop(100%, #293e56));
            /* IE10+ */

            background: -webkit-linear-gradient(-45deg, #455772 0%, #6b8395 18%, #a0d0cc 35%, #a0d0cc 45%, #a0d0cc 60%, #56737c 81%, #293e56 100%);
            /* W3C */

            background: -o-linear-gradient(-45deg, #455772 0%, #6b8395 18%, #a0d0cc 35%, #a0d0cc 45%, #a0d0cc 60%, #56737c 81%, #293e56 100%);
            /* IE6-9 fallback on horizontal gradient */

            background: -ms-linear-gradient(-45deg, #455772 0%, #6b8395 18%, #a0d0cc 35%, #a0d0cc 45%, #a0d0cc 60%, #56737c 81%, #293e56 100%);
            background: linear-gradient(135deg, #455772 0%, #6b8395 18%, #a0d0cc 35%, #a0d0cc 45%, #a0d0cc 60%, #56737c 81%, #293e56 100%);
            filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#455772', endColorstr='#293e56', GradientType=1);
        }
        .accelerate,
        .particle1,
        .particle2,
        .orb,
        .orb1 {
            transform: translateZ(0);
            perspective: 1000px;
            backface-visibility: hidden;
        }
        .particle1 {
            width: 200vw;
            height: 100vh;
            background: url("../img/particles2.png");
            position: absolute;
            z-index: 1000;
            opacity: 0.45;
            overflow: hidden;
            animation: particleOne 140s linear infinite;
            filter: blur(4px) brightness(0.9);
            -webkit-filter: blur(4px) brightness(0.9);
        }
        .particle2 {
            width: 200vw;
            height: 100vh;
            filter: blur(1px) hue-rotate(-8deg);
            -webkit-filter: blur(1px) hue-rotate(-8deg);
            background: url("../img/particles3.png");
            position: absolute;
            z-index: 1000;
            /*&.next {
            margin-left: -40%;
            animation: particleOne 90s linear infinite;
          }*/

            opacity: 0.45;
            overflow: hidden;
            animation: particleOne 130s linear infinite;
        }
        .orb {
            background: url("../img/orb.png");
            width: 500px;
            height: 356px;
            position: absolute;
            left: 50%;
            opacity: 0.8;
            z-index: 50;
            animation: orb 2s ease infinite;
        }
        .orb1 {
            position: absolute;
        }
        .orb2 {
            top: 30%;
            left: 10%;
            opacity: 0.85;
            z-index: 50;
            filter: blur(1px) hue-rotate(-8deg);
            -webkit-filter: blur(1px) hue-rotate(-8deg);
            animation: orb2 70s ease-out infinite;
        }
        .orb2 img {
            width: 40%;
            height: auto;
        }
        .orb3 {
            top: 4%;
            left: 80%;
            opacity: 0.6;
            z-index: 20;
            filter: blur(2px) hue-rotate(15deg);
            -webkit-filter: blur(2px) hue-rotate(15deg);
            animation: orb2 70s ease-out infinite;
        }
        .orb3 img {
            width: 30%;
            height: auto;
        }
        @keyframes particleOne {
            0% {
                transform: translateX(0);
            }
            100% {
                transform: translateX(200%);
            }
        }
        @keyframes orb {
            50% {
                transform: translateY(-5px);
            }
        }
        @keyframes orb2 {
            50% {
                transform: translateX(300px);
            }
        }
        .blue {
            position: absolute;
            z-index: 70;
            opacity: 0.2;
            top: 45%;
            width: 100%;
            height: 10%;
            box-shadow: 0px 0px 50px 50px #8eb7ba;
            background: #8eb7ba;
        }
        .land {
            width: 100%;
            height: auto;
            bottom: 0;
            position: absolute;
        }
        .land img {
            width: 100%;
            height: auto;
        }
        @media screen and (max-height: 400px) {
            .land {
                bottom: -55%;
            }
        }
        @media screen and (max-width: 620px) {
            .orb {
                left: 10% !important;
            }
            .orb3 {
                left: -2% !important;
            }
        }
    </style>
</head>
<body>
<div class="particle1"></div>
<div class="particle2"></div>
<div class="particle2 next"></div>
<div class="blue"></div>
<div class="orb"></div>
<div class="orb1 orb2">
    <img src="../img/orb.png">
</div>
<div class="orb1 orb3">
    <img src="../img/orb.png">
</div>
<div class="land">
    <img src="../img/land.png">
</div>
</body>
</html>